﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <link href="../Resource/CSS/site.css" rel="stylesheet" />
    <style type="text/css">
        .container {
            width: 99%;
            border: 1px outset red;
            padding: 5px;
        }
    </style>
    <script src="../Resource/JS/jquery-1.10.2.js"></script>
    <script src="../Resource/JS/localStorage.js"></script>
    <script src="../Resource/JS/cookie.js"></script>
</head>
<body>
    <h1>LocalStorage Test</h1>
    <div class="container">
        <input type="button" id="btn_load" value="Load" />
        <input type="button" id="btn_add" value="Add" />
        <input type="button" id="btn_edit" value="Edit" />
        <input type="button" id="btn_del" value="Delete" />
        Key:<input type="text" id="txt_key" />
        <input type="button" id="btn_search" value="Search" />

        <table id="tab" class="tab">
            <tr>
                <td>
                    <input type="checkbox" id="ck_all" /></td>
                <td>Keys</td>
                <td>Values</td>
            </tr>
            <tbody id="tb">
            </tbody>
        </table>
        <div id="div_dialog" style="border: 3px solid blue; display: none; margin: 10px; padding: 10px;">
            key:<input type="text" id="add_key" />
            val:<input type="text" id="add_val" />
            <input type="button" id="btn_save" value="Save" />
        </div>
    </div>

    <h1>Cookie Test</h1>
    <div class="container">
        <input type="button" id="Button1" value="Load" />
        <input type="button" id="Button2" value="Add" />
        <input type="button" id="Button3" value="Edit" />
        <input type="button" id="Button4" value="Delete" />
        Key:<input type="text" id="Text1" />
        <input type="button" id="Button5" value="Search" />

        <table id="Table1" class="tab">
            <tr>
                <td>
                    <input type="checkbox" id="Checkbox1" /></td>
                <td>Keys</td>
                <td>Values</td>
            </tr>
            <tbody id="Tbody1">
            </tbody>
        </table>
        <div id="div1" style="border: 3px solid blue; display: none; margin: 10px; padding: 10px;">
            key:<input type="text" id="Text2" />
            val:<input type="text" id="Text3" />
            <input type="button" id="Button6" value="Save" />
        </div>
    </div>
</body>
</html>
<script>
    var local = new LocalStroageControl();
    var cookies = new cookies();

    function removeTr(tb) {
        $("#" + tb + " tr").remove();
    }

    function renderTable(keys, vals, tb) {
        if (keys.length == 0) {
            alert("no localStorage in your computer!");
            removeTr(tb);
            return;
        }
        removeTr(tb);
        var html = "";
        for (var i = 0; i < keys.length; i++) {
            html += "<tr><td><input type='checkbox' tag='checkone' /></td><td>" + keys[i] + "</td><td>" + vals[i] + "</td></tr>";
        }
        $("#" + tb).append($(html));
    }

    function chooseItem(tb) {
        var item = [];
        $("#" + tb + " input[type=checkbox]").each(function () {
            if (this.checked) {
                item.push(this);
            }
        })
        return item;
    }

    $("#btn_load").click(function () {
        var keys = local.GetAllKeys();
        var vals = local.GetAllValues();
        renderTable(keys, vals, "tb");
    })

    var tag = "";
    $("#btn_add").click(function () {
        $("#div_dialog").css("display", "block");
        tag = "add";
    })

    $("#btn_edit").click(function () {
        var item = chooseItem("tb");
        if (item.length != 1) {
            alert("choose one!");
            return;
        }
        tag = "edit";
        $("#div_dialog").css("display", "block");
        //bind item
        $("#add_key").val($(item).parent().next().text());
        $("#add_val").val($(item).parent().next().next().text());
    })

    $("#btn_save").click(function () {
        if (tag == "add") {
            local.set($("#add_key").val().trim(), $("#add_val").val().trim(), true);
        }
        if (tag == "edit") {
            local.set($("#add_key").val(), $("#add_val").val(), true);
        }
        $("#div_dialog").css("display", "none");
        var keys = local.GetAllKeys();
        var vals = local.GetAllValues();
        renderTable(keys, vals, "tb");
    })

    $("#btn_del").click(function () {
        var items = chooseItem("tb");
        if (items.length == 0) {
            alert("choose one");
            return;
        }
        var keys = [];
        for (var i = 0; i < items.length; i++) {
            local.remove($(items[i]).parent().next().text().trim());
        }
        var keys = local.GetAllKeys();
        var vals = local.GetAllValues();
        renderTable(keys, vals, "tb");
    })

    $("#btn_search").click(function () {
        var val = $("#txt_key").val();
        var keys = local.GetAllKeys();
        var vals = local.GetAllValues();
        if (val == "") {
            renderTable(keys, vals, "tb");
        }
        else {
            var _ks = [];
            var _vs = [];
            for (var i = 0; i < keys.length; i++) {
                if (keys[i].indexOf(val) != -1) {
                    _ks.push(keys[i]);
                    _vs.push(vals[i]);
                }
            }
            renderTable(_ks, _vs, "tb");
        }
    })

    var tag1 = "";
    $("#Button1").click(function () {
        var keys = cookies.getKeys();
        var vals = cookies.getValues();
        renderTable(keys, vals, "Tbody1");
    })
    $("#Button2").click(function () {
        $("#div1").css("display", "block");
        tag1 = "add";
    })
    $("#Button3").click(function () {
        var item = chooseItem("Tbody1");
        if (item.length != 1) {
            alert("choose one!");
            return;
        }
        tag1 = "edit";
        $("#div1").css("display", "block");
        //bind item
        $("#Text2").val($(item).parent().next().text());
        $("#Text3").val($(item).parent().next().next().text());
    })
    $("#Button6").click(function () {
        if (tag1 == "add") {
            cookies.addCookie($("#Text2").val().trim(), $("#Text3").val().trim(), false);
        }
        if (tag1 == "edit") {
            cookies.addCookie($("#Text2").val(), $("#Text3").val(), true);
        }
        $("#div1").css("display", "none");
        var keys = cookies.getKeys();
        var vals = cookies.getValues();
        renderTable(keys, vals, "Tbody1");
    })
    $("#Button5").click(function () {
        var val = $("#Text1").val();
        var keys = cookies.getKeys();
        var vals = cookies.getValues();
        if (val == "") {
            renderTable(keys, vals, "Tbody1");
        }
        else {
            var _ks = [];
            var _vs = [];
            for (var i = 0; i < keys.length; i++) {
                if (keys[i].indexOf(val) != -1) {
                    _ks.push(keys[i]);
                    _vs.push(vals[i]);
                }
            }
            renderTable(_ks, _vs, "Tbody1");
        }
    })
    $("#Button4").click(function () {
        var items = chooseItem("Tbody1");
        if (items.length == 0) {
            alert("choose one");
            return;
        }
        var keys = [];
        for (var i = 0; i < items.length; i++) {
            cookies.delCookie($(items[i]).parent().next().text().trim());
        }
        var keys = cookies.getKeys();
        var vals = cookies.getValues();
        renderTable(keys, vals, "Tbody1");
    })
</script>
